.status-icon {
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;

  &-success {
    fill: var(--spark-color-moss-tint1);
  }

  &-failed {
    fill: var(--spark-color-coral);
  }

  &-warn {
    fill: var(--spark-color-daisy-shade1);
  }

  &-skipped {
    fill: var(--spark-color-theme-dark-gray600);
  }
}

.python-icon {
  width: 1.25rem;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem;
}

.status-table {
  --table-border-color: var(--spark-color-theme-light-gray400);
  --num-devices: 1;

  border: 1px solid var(--table-border-color);
  border-bottom: 0;
  display: grid;
  grid-template-columns: auto repeat(calc(4 * var(--num-devices)), auto);
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: row;

  .cell {
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0.175rem 0.5rem;
  }
}

.os-header {
  grid-row: 1 / 3;
  grid-column: 1;
  font-weight: 500;
  border-bottom: 1px solid var(--table-border-color);
  align-content: center;
}

.os-names {
  grid-row: 3 / 7;
  grid-column: 1;
  display: grid;
  grid-template-rows: subgrid;
}

.os-header,
.os-names {
  .cell {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.cpu-device-header {
  grid-row: 1;
  grid-column: 2 / 6;
}

.gpu-device-header {
  grid-row: 1;
  grid-column: 6 / 10;
}

.device-header {
  font-weight: 500;
  display: grid;
  grid-template-rows: subgrid;
}

.cpu-python-versions {
  grid-row: 2;
  grid-column: 2 / 6;
}

.gpu-python-versions {
  grid-row: 2;
  grid-column: 6 / 10;
}

.python-versions {
  font-weight: 500;
  display: grid;
  grid-template-columns: subgrid;
  border-bottom: 1px solid var(--table-border-color);
}

.cpu-statuses {
  grid-row: 3 / 7;
  grid-column: 2 / 6;
}

.gpu-statuses {
  grid-row: 3 / 7;
  grid-column: 6 / 10;
}

.statuses {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.device-header,
.python-versions,
.statuses {
  .cell {
    padding-left: 1rem;
  }
}

.os-names,
.statuses {
  .cell {
    border-bottom: 1px solid var(--table-border-color);
  }
}

.device-header,
.python-versions,
.statuses {
  border-left: 1px solid var(--table-border-color);
}
